import { useKeyPress } from 'ahooks'
import { useDispatch } from 'react-redux'
import { ActionCreators as UndoActionCreators } from 'redux-undo'
import {
  removeSelectedComponent,
  changeComponentHidden,
  toggleComponentLocked,
  copySelectedComponent,
  pasteComponent,
  selectPrevComponent,
  selectNextComponent,
} from '../store/componentsReducer'
import { act } from 'react-dom/test-utils'
import { useKey } from '@dnd-kit/core/dist/components/DragOverlay/hooks'

// !document.activeElement 是 JavaScript 中的一个属性，它返回当前文档中获得焦点（即当前活动的）元素。这可以是 <input>、<textarea> 或其他可获得焦点的元素。通过 JavaScript 使用 document.activeElement 可以确定当前用户正在与页面上哪个元素进行交互。
function isActiveElementValid() {
  const activeElem = document.activeElement

  // *没有增加 dnd-kit之前
  // if (activeElem === document.body) return true //说明光标没有focus到input

  // *增加 dnd-kit以后
  if (activeElem === document.body) return true
  if (activeElem?.matches('div[role="button"]')) return true

  return false
}

function useBindCanvasKeyPress() {
  const dispatch = useDispatch()
  // TODO 删除组件
  useKeyPress(['backspace', 'delete'], () => {
    // TODO 执行删除前需判断当前光标聚焦focus的元素
    if (!isActiveElementValid()) return
    dispatch(removeSelectedComponent())
  })

  // TODO 复制
  useKeyPress(['ctrl.c', 'meta.c'], () => {
    if (!isActiveElementValid()) return
    dispatch(copySelectedComponent())
  })

  // TODO 粘贴
  useKeyPress(['ctrl.v', 'meta.v'], () => {
    if (!isActiveElementValid()) return
    dispatch(pasteComponent())
  })

  // TODO 选中上一个
  useKeyPress('uparrow', () => {
    if (!isActiveElementValid()) return
    dispatch(selectPrevComponent())
  })

  // TODO 选中下一个
  useKeyPress('downarrow', () => {
    if (!isActiveElementValid()) return
    dispatch(selectNextComponent())
  })

  //TODO 撤销
  useKeyPress(
    ['ctrl.z', 'meta.z'],
    () => {
      if (!isActiveElementValid()) return
      dispatch(UndoActionCreators.undo())
    },
    {
      exactMatch: true,
    }
  )
  //TODO 重做
  useKeyPress(
    ['ctrl.shift.z', 'meta.shift.z'],
    () => {
      if (!isActiveElementValid()) return
      dispatch(UndoActionCreators.redo())
    },
    {
      exactMatch: true, //严格匹配:必须只按了ctrl.z或meta.z才会触发,如果不是严格匹配,那么按了ctrl和z也会被触发
    }
  )
}

export default useBindCanvasKeyPress
